<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <style>
        div {
            width: 600px;
            margin: auto;
            border: 1px solid black;
            text-align: center;
            padding: 20px;
            padding-bottom: 50px;
            box-sizing: border-box;
            margin-top: 70px;
            border-radius: 7px;
            background-color: rgba(172, 202, 235, 0.486);
        }

        button {
            width: 200px;
            height: 40px;
            font-size: 18px;
            background-color: rgb(40, 201, 207);
            border:none;
            color: white;
        }

        input {
            width: 200px;
            height: 20px;
        }

        span {
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div>
        <h1>注册</h1>
        <span>用户名：</span><input type="text" id="acount"><br><br>
        <span>密码：</span>&emsp;<input type="password" id="psw"><br><br>
        <span>确认密码：</span><input type="password" id="repeatPsd"><br><br><br>
        <button type="submit">注册</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 给注册按钮绑定点击事件
        $('button').click(() => {
            var acount = $("#acount").val()
            var psw = $("#psw").val()
            var repeatPsd = $('#repeatPsd').val()
            var mail = $('#mail').val()

            if (acount != '' && psw != "" && repeatPsd != "" && mail != "") {
                if (psw == repeatPsd) {
                    var enroll = {
                        name: acount,
                        psd: psw,
                    }
                    localStorage.setItem('enroll', JSON.stringify(enroll))
                    location.assign('./登录.html')
                } else {
                    alert('两次密码不一致，请重新输入')
                }
            } else {
                alert('请将信息填写完整')
            }
        })
    </script>
</body>

</html>